<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import ClinicSignInPopup from './components/clinicSignInPopup.vue';

// 生成预约数据
const appointmentList = ref([
  {
    id: 1,
    department: '内科-呼吸内科',
    doctor: '李医生',
    type: '普通门诊',
    date: '8月20日',
    time: '上午 09:00',
    canSignIn: true
  },
  {
    id: 2,
    department: '外科-骨科',
    doctor: '王医生',
    type: '专家门诊',
    date: '8月21日',
    time: '下午 14:30',
    canSignIn: true
  },
  {
    id: 3,
    department: '妇产科',
    doctor: '张医生',
    type: '普通门诊',
    date: '8月22日',
    time: '上午 10:30',
    canSignIn: false
  },
  {
    id: 4,
    department: '儿科-小儿内科',
    doctor: '刘医生',
    type: '专家门诊',
    date: '8月23日',
    time: '下午 15:00',
    canSignIn: false
  }
]);

const signInPopupRef = ref<typeof ClinicSignInPopup>();
function handleSignIn(item: typeof appointmentList.value[0]) {
  if (item.canSignIn) {
    signInPopupRef.value?.onOpen();
  }
}
</script>

<template>
  <view class="page flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto">
      <view class="page-title mt-55">
        药房签到
      </view>
      <view class="page-subtitle mt-24">
        药房取药签到，减少排队等待
      </view>
      <view class="page-content mx-53 mt-43 px-45">
        <view class="page-content__title mt-40">
          您的药房预约
        </view>
        <view class="page-content__list mt-20">
          <view
            v-for="item in appointmentList"
            :key="item.id"
            class="page-content__card p-30"
            @click="handleSignIn(item)"
          >
            <view>
              <view class="content-card__title">
                {{ item.department }}
              </view>
              <view class="content-card__doctor mt-12">
                {{ item.doctor }} · {{ item.type }}
              </view>
              <view class="content-card__time mt-40">
                {{ item.date }} {{ item.time }}
              </view>
            </view>
            <view>
              <view
                class="content-card__sign"
                :class="{ 'content-card__sign--disabled': !item.canSignIn }"
              >
                {{ item.canSignIn ? '可签到' : '未开始' }}
              </view>
              <view
                v-if="!item.canSignIn"
                class="content-card__sign-desc mt-12 text-center"
              >
                不可签到
              </view>
            </view>
          </view>
        </view>

        <view class="card-status my-44">
          <view class="card-status__item mr-40">
            可签到
          </view>
          <view class="card-status__item card-status__item--disabled">
            未开始（不可签到）
          </view>
          <view class="card-status__item card-status__item--active">
            已签到
          </view>
        </view>
      </view>
    </view>

    <ClinicSignInPopup ref="signInPopupRef" />
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '药房签到',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: var(--bg-color);

  .page-title {
    color: #3d3d3d;
    font-size: 60px;
    font-weight: bold;

    text-align: center;
  }

  .page-subtitle {
    color: #6f6f6f;
    font-size: 28px;
    text-align: center;
  }

  .page-content {
    box-sizing: border-box;
    border: 2px solid #e6effd;
    background: #d8e7ff;
    border-radius: 20px;
    .page-content__title {
      color: var(--text-color);
      font-size: 48px;
      font-weight: bold;
    }
    .page-content__card {
      @apply flex  justify-between;
      background: #f5f9ff;
      border-radius: 20px;
      margin-bottom: 20px;
      .content-card__title {
        color: var(--text-color);
        font-size: 42px;
        font-weight: bold;
      }
      .content-card__doctor {
        color: #686869;
        font-size: 30px;
      }
      .content-card__time {
        font-size: 24px;
        color: var(--secondary-text-color);
      }

      .content-card__sign {
        background: #dfecff;
        border-radius: 100px;
        color: var(--primary);
        font-size: 32px;
        padding: 12px 36px;
        &.content-card__sign--disabled {
          background: #e8f0fe;
          color: #8b8e93;
        }
      }
      .content-card__sign-desc {
        color: #cb8100;
        font-size: 24px;
      }
    }

    .card-status {
      @apply flex items-center;
      .card-status__item {
        color: var(--primary);
        font-size: 30px;
        position: relative;
        padding-left: 30px;
        &:after {
          position: absolute;
          content: '';
          width: 17px;
          height: 17px;
          background: var(--primary);
          border-radius: 50%;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        &.card-status__item--disabled {
          color: var(--secondary-text-color);
          &:after {
            background: #777f92;
          }
        }
        &.card-status__item--active {
          color: #1c9b00;
          &:after {
            background: #1c9b00;
          }
        }
      }
    }
  }
}
</style>
